<template>
    <div :style="'height:'+ (pageSize+2) * 150 +'px;'"  class="detail-comment-div">


        <el-row type="flex" justify="center">
            <el-col :span="13">
                <el-row class="comment-card">
                    <el-col :span="17">



                        <!--v-bind:style="changeLength"-->
                        <el-card  class="user-comment" :body-style="{ padding: '0px' }">

                            <!--:style="'height:'+ (pageSize+1) * 150 +'px;'"-->
                            <div slot="header" class="clearfix">
                                <span>评论区</span>
                                <el-button type="success" size="small" icon="el-icon-edit" style="float: right;">我来说两句
                                </el-button>
                            </div>

                            <div class="comment-part" v-if="this.$store.state.isLogin">
                            <el-row v-for="user in UserList.slice(0,pageSize)">

                                        <!--头像-->
                                <el-col :span="4" class="user-profile-column">
                                    <el-image class="user-profile" :src="user.url">
                                    </el-image>
                                </el-col>
                                     <!--个人评论信息-->
                                <el-col :span="20" class="individual-comment">
                                        <!--用户名及等级-->
                                        <el-row class="username">
                                            <el-col :span="3"><span>{{user.name}}</span></el-col>
                                            <!--<el-col :span="4"><span class="level">{{user.level}}</span></el-col>-->
                                        </el-row>
                                    <!--具体评论-->
                                        <el-row class="comment-text-row">

                                            <span class="discuss">讨论</span>
                                            <span class="comment-text">{{user.comment}}</span>
                                        </el-row>
                                    <!--点赞及评论-->
                                       <el-row class="attend">
                                           <img width="15" height="15" :src="dzpic"alt="dianzan">
                                           &nbsp;
                                           <img width="15" height="15" :src="plpic"alt="pinglun">
                                       </el-row>
                                 </el-col>
                            </el-row>

                            <el-row class="showmore">
                                <el-button v-if="pageSize<UserList.length" @click="ShowMore">点击更多</el-button>
                                <el-button v-else @click="Reset">到底了</el-button>
                            </el-row>
                            </div>
                            <div class="go-to-login" v-if="!this.$store.state.isLogin">

                                    <el-row class="showmore">
                                        <el-button @click="Gotologin">请先登录</el-button>
                                    </el-row>

                            </div>
                        </el-card>



                    </el-col>
                    <el-col :span="1" class="cus-gutter"></el-col>
                    <el-col :span="6" class="recommend-col">
                        <el-card :body-style="{padding: '0px'}" class="recommend-card">
                            <div slot="header" class="clearfix">
                                <span>看过的人还看</span>
                            </div>

                            <el-row v-for="(recommendBooks, key) in recommendBookList" :key="key">
                                <el-col :span="12" v-for="(book, key01) in recommendBooks" :key="key01" class="recommend-book">
                                    <el-link :underline="false" :title="book.title">
                                        <el-image :src="book.url"></el-image>
                                    </el-link>
                                    <div class="recommend-book-inf">
                                        <el-link :underline="false" :title="book.title">
                                            {{book.title}}
                                        </el-link>
                                    </div>
                                </el-col>
                            </el-row>

                        </el-card>

                        <el-card :body-style="{padding: '0px'}" class="same-type-rank">
                            <div slot="header" class="clearfix">
                                <span>同类热销榜</span>
                            </div>
                            <el-row type="flex" justify="center">
                                <el-col class="same-rank-content" :span="20">
                                    <el-row class="rank-content" v-for="(item, key) in topTenData" :key="key">
                                        <el-col :span="4">
                                            <p class="rank-num">{{item.rank}}</p>
                                        </el-col>
                                        <el-col :span="20">
                                            <el-link :underline="false" class="rank-name">{{item.bookName}}</el-link>
                                            <el-divider></el-divider>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-card>

                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "DetailComment",
        data() {
            return {

                pageSize: 5,
                anyMore: true,
                ShowText: "点击更多",
                changeLength: "height: 900px",
                dzpic: require("../../assets/dz.gif"),
                plpic: require("../../assets/pl.gif"),
                recommendBookList: [
                    [{
                        url: "https://images-na.ssl-images-amazon.com/images/I/81pZB30%2BSCL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "再见，吾爱",
                        content: "读了《再见，吾爱》才发现，有些人你就是戒不掉，有些事你就是妥协不了！"
                    },
                        {
                            url: "https://images-na.ssl-images-amazon.com/images/I/71k2fG9T4FL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                            title: "人性的枷锁",
                            content: "“故事圣手”“天才小说家”毛姆长篇代表作，一本解答人生奥义的希望之书"
                        }],
                    [{
                        url: "https://images-na.ssl-images-amazon.com/images/I/51uU6L%2BrfpL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "怒",
                        content: "日本重量级芥川奖作家吉田修一，《恶人》之后又一新作，比《白夜行》更凄美，比《告白》更深刻，照见都市人无处遁形的孤独"
                    },
                        {
                            url: "https://images-na.ssl-images-amazon.com/images/I/51sDzGa%2BpfL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                            title: "醉步男",
                            content: "世界科幻文学至高代表作，日本狂销23年，终于引进正版！同时收录恐怖小说名篇《玩具修理者》"
                        }]
                ],
                topTenData: [
                    {rank: 1, bookName: "祈祷落幕时"},
                    {rank: 2, bookName: "白夜行"},
                    {rank: 3, bookName: "幻夜"},
                    {rank: 4, bookName: "秘密"},
                    {rank: 5, bookName: "信"},
                    {rank: 6, bookName: "单恋"},
                    {rank: 7, bookName: "流星之绊"},
                    {rank: 8, bookName: "放学后"},
                    {rank: 9, bookName: "解忧杂货店"},
                    {rank: 10, bookName: "分身"}
                ],
                UserList:[
                    {
                        name: "John",
                        level: "lv1",
                        url: require("../../assets/default.jpg"),
                        comment: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                    },
                    {
                        name: "Mike",
                        level: "lv3",
                        url: require("../../assets/default.jpg"),
                        comment: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                    },
                    {
                        name: "Alen",
                        level: "lv5",
                        url: require("../../assets/default.jpg"),
                        comment: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                    },
                    {
                        name: "Bob",
                        level: "lv5",
                        url: require("../../assets/default.jpg"),
                        comment: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                    },
                    {
                        name: "Brain",
                        level: "lv5",
                        url: require("../../assets/default.jpg"),
                        comment: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                    },
                    {
                        name: "Gary",
                        level: "lv5",
                        url: require("../../assets/default.jpg"),
                        comment: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                    },
                    {
                        name: "Kevin",
                        level: "lv5",
                        url: require("../../assets/default.jpg"),
                        comment: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                    },
                    {
                        name: "Luther",
                        level: "lv5",
                        url: require("../../assets/default.jpg"),
                        comment: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                    },
                    {
                        name: "Jason",
                        level: "lv5",
                        url: require("../../assets/default.jpg"),
                        comment: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                    },
                    {
                        name: "Lily",
                        level: "lv5",
                        url: require("../../assets/default.jpg"),
                        comment: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                    },
                    {
                        name: "Jack",
                        level: "lv5",
                        url: require("../../assets/default.jpg"),
                        comment: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                    },
                    {
                        name: "Ivy",
                        level: "lv5",
                        url: require("../../assets/default.jpg"),
                        comment: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                    },
                    {
                        name: "Helen",
                        level: "lv5",
                        url: require("../../assets/default.jpg"),
                        comment: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                    },
                    {
                        name: "Wendy",
                        level: "lv5",
                        url: require("../../assets/default.jpg"),
                        comment: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
                    }
                ]
            }
        },
        methods: {
            ShowMore(){
                if((this.pageSize+5)>this.UserList.length) this.pageSize = this.UserList.length;
                else this.pageSize += 5;

            },
            Reset(){
                this.pageSize = 5;
            },
            Gotologin(){
                this.$router.push({name: "login"});
            }
        },
        components: {}
    }
</script>

<style scoped>
    .showmore{
        height: 30px;
        text-align: center;
        padding: 30px;
        margin-bottom: 30px
    }
    .attend .line {
        margin: 0 12px 0 8px;
        width: 1px;
        height: 12px;
        background: #f0f0f0;
        float: left;
    }

    .attend{
        margin-bottom: 12px;
        overflow: hidden;
    }

    .comment-text{
        color:#9e9e9e;
        font-size: 16px;
        word-break: break-all;

    }
    .comment-text-row{
        padding-top: 7px;
        margin-bottom: 13px;
        overflow: hidden;
        width: 600px;
        margin-right: 20px;
    }
    .discuss{
        width: 45px;
        height: 18px;
        background: #409eff;
        color: #fff;
        line-height: 18px;
        text-align: center;
        margin: 5px 15px 0 0;
        float: left;
        font-size: 15px;
    }
    .username{
        margin: 0 0 11px 0;
    }
    .individual-comment{
        border-bottom: 1px solid #f0f0f0;

        padding: 4px;
    }
    .level{
        width: 45px;
        height: 20px;
        background: #d2d2d2;
        color: #fff;
        line-height: 18px;
        text-align: center;
        margin: 5px 0 0 0;
        float: left;
        font-size: 15px;
    }
    .username{
        margin-top: 15px;
    }
    .user-profile-column{
        text-align: center;
        margin-top: 20px;
    }

    .user-profile{
        width: 60px;
        height: 60px;
        border-radius:50%;
        overflow:hidden;
    }

    .detail-comment-div {
        height: 2600px;
        background: #f0f0f0;
    }

    .comment-card {
        height: 1000px;
    }



    .cus-gutter {
        height: 800px;
    }

    .recommend-card {
        height: 450px;
    }

    .recommend-book {
        margin-top: 20px    ;
    }

    .recommend-book-inf {
        text-align: center;
    }
    .same-type-rank {
        height: 540px;
        margin-top: 40px;
    }

    .same-rank-content {
        height: 420px;
        margin: 10px 0;
    }

    .rank-num {
        margin: 0;
        font-size: 14px;
        height: 42px;
        line-height: 42px;
        text-align: center;
    }

    .rank-name {
        height: 42px;
        line-height: 42px;
    }
    .rank-content {
        height: 42px;
        margin: 0;
    }

    .el-divider {
        margin: 0;
    }
</style>